<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="手机/账号登录"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="input-box">
				<input class="input-text" type="number" placeholder="输入手机号" v-model="phone"/>
			</view>
			<view class="input-box" v-if="type==1">
				<input class="input-text" type="password" placeholder="输入6-16位密码，限字母及数字" v-model="pwd1"/>
			</view>
			<view class="input-box vcode" v-else>
				<input class="input-text" type="text" placeholder="请输入验证码" v-model="vcode"/>
				<text class="send-code" @tap="getCode" v-if="daojishi">发送验证码</text>
				<text class="send-code" v-else>{{vtext}}</text>
			</view>
			<view class="input-box login-type">
				<text class="send-code" v-if="type==1">忘记密码?</text>
				<text class="send-code" @tap="chageType">{{typeText}}</text>
			</view>
			<!-- <view class="input-box">
				<input class="input-text" type="number" placeholder="输入邀请人ID(选填)" v-model="extensionUserId"/>
			</view> -->
			<view class="register-box">
				<image @tap="login"
				:src=" submit ? '../../static/common/login-2.png' :'../../static/common/login-1.png'" class="register-submit"></image>
			</view>
			
			
			
			
		</view>
		
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	export default{
		components:{
			commonTitle
		},
		data () {
			return {
				apptoken:"",
				phone:"",
				pwd1:"",
				pwd2:"",
				vcode:"",
				vtext:"获取验证码",
				submit:false,
				extensionUserId:"",
				type:1,//1为密码登录，2为验证码登录
				typeText:"手机验证码登录",
				timer:"timer",
				daojishi:true
			}
		},
		watch:{
			vtext(newName, oldName) {
				 this.submit = true;
			},
			pwd1(newName, oldName) {
				 this.submit = true;
			},
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
		},
		methods: {
			chageType(){
				if(this.type == 1){
					this.type = 2;
					this.typeText = "密码登录";
					this.pwd1 = "";
					this.vcode = "";
					this.submit = false;
					clearInterval(this.timer);
					this.vtext = "获取验证码";
				}else{
					this.type = 1;
					this.typeText = "手机验证码登录";
					this.pwd1 = "";
					this.vcode = "";
					this.submit = false;
					clearInterval(this.timer);
					this.vtext = "获取验证码";
				}
			},
			getCode(){
				
				if(!this.phone){
					this.$CommonJS.showToast("请输入手机号");
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					this.$CommonJS.showToast("手机号码有误，请重填");
					return; 
				} 
				const _this = this;
				this.daojishi = !this.daojishi;
				uni.request({
					url:this.$API.URL + this.$API.phoneGetvalidatecode,
					data:{phone:this.phone},
					success(res) {
						console.log(res)
						if(res.data.success){
							_this.$CommonJS.showToast("验证码已发送");
							
							_this.getTime();
						}
					}
				})
			},
			getTime(){
				var _this = this;
				
				var num = 60;
			  var timer =	 setInterval(function(){
					if(num <= 0){
						clearInterval(timer);
						_this.vtext = "";
						_this.daojishi = true;
						return;
					}
					
					_this.vtext = '重新发送' + num + 's';
					num --;
				},1000)
			},
			login(){
				const _this = this;
				if(!this.phone){
					this.$CommonJS.showToast("请输入手机号");
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					this.$CommonJS.showToast("手机号码有误，请重填");
					return; 
				} 
				if(this.type == 1){
					if(!this.pwd1){
						this.$CommonJS.showToast("请输入密码");
						return;
					}
					if(this.pwd1.toString().length<6){
						this.$CommonJS.showToast("请设置长度大于6位的密码");
						return;
					}
				}else{
					if(!this.vcode){
						this.$CommonJS.showToast("请输入验证码");
						return;
					}
				}
				if(this.type == 1){
					//密码登录
					const url = this.$API.URL + this.$API.userLogin;
					const data = {phone:this.phone,  password:this.pwd1 };
					this.getRequest(url,data);
				}else{
					//短信验证码登录
					const url = this.$API.URL + this.$API.loginByVcode;
					const data = {phone:this.phone,  vcode:this.vcode };
					this.getRequest(url,data);
				}
				
			},
			getRequest(url,data){
				const _this = this;
				uni.request({
					url:url,
					data:data,
					success(result) {
						console.log(result);
						if(result.data.success){
							uni.showToast({
								title:"登录成功"
							})
							uni.setStorage({
								key:"apptoken",
								data:result.data.data.apptoken,
							})
							uni.setStorage({
								key:"isAutoTbao",
								data:result.data.data.relation_id
							})
							uni.setStorage({
								key:"UserInfo",
								data:result.data.data
							})
							uni.setStorage({
								key:"userId",
								data:result.data.data.userId,
								success() {
									//uni.showToast("登录成功")
									uni.switchTab({
										url:'../home/home',
									})
								}
							})
						}else{
							_this.$CommonJS.showToast("请使用微信登录");
							setTimeout(function(){
								uni.navigateTo({
									url:'./login'
								})
							},1500)
						}
					}
				})
			},
		}
		
	}
</script>

<style>
	@import url("register.css");
</style>
